<style lang="stylus" type="text/stylus">
  @import "css/reviewProcess.styl"
</style>

<template>
  <div id="reviewProcess">
    <VuePerfectScrollbar ref="reivewProcessNav" class="reivew-process-nav">
      <ul>
        <li @click="getProcess(index,nav,'nav')" v-for="(nav,index) in policyData" :key="index"
            :class="{active:index == navActive}" class="nav-item">
          <span class="mark"></span>
          <div class="shortTitle">{{nav.shortTitle}}</div>
          <div class="longTitle">{{nav.longTitle}}</div>
          <div v-if="!nav.processId" class="alert">
            <Icon class="record" type="record"></Icon>
            尚未设置审核流程
          </div>
        </li>
      </ul>
    </VuePerfectScrollbar>
    <VuePerfectScrollbar class="review-process-ps" :style="!reviewProcessData.length || !getUserAdmin?'height:100%':''">
      <div class="apply-type">
        <div class="title">申报项目类型</div>
        <div class="con" v-if="getUserAdmin">
          <Input :style="projectTypeFocus?'border-color : #57a3f3;background-color : #fff':''"
                 v-model="projectType"
                 @on-change="projectTypeChange($event)"
                 placeholder="未填写"></Input>
          <ButtonGroup class="btn-tools" v-if="projectTypeFocus">
            <Button @click="cannelUpdatePolicyTyp()">取消</Button>
            <Button type="primary" @click="updatePolicyType(0)">确定</Button>
          </ButtonGroup>
        </div>
        <div v-else class="con"><span>{{projectType?projectType:'未填写'}}</span></div>
      </div>
      <div class="apply-basis">
        <div class="title">申请依据</div>
        <div class="con" v-if="getUserAdmin">
          <Input v-model="foundation"
                 :style="foundationFocus?'border-color : #57a3f3;background-color : #fff':''"
                 @on-change="foundationChange($event)"
                 type="textarea" :autosize="true"
                 placeholder="未填写"></Input>
          <ButtonGroup class="btn-tools" v-if="foundationFocus">
            <Button @click="cannelUpdatePolicyType()">取消</Button>
            <Button type="primary" @click="updatePolicyType(1)">确定</Button>
          </ButtonGroup>
        </div>
        <div v-else class="con"><span>{{foundation?foundation:'未填写'}}</span></div>
      </div>
      <div class="process-list">
        <div v-if="reviewProcessData.length" class="process-ps">
          <div class="process-ps-flex">
            <div class="process-child" v-for="(item,index) in reviewProcessData" :key="index">
              <div class="process-child-body">
                <div class="process-title">{{item.name}}</div>
                <div class="card">
                  <div class="title">环节说明</div>
                  <div class="con">{{item.description}}</div>
                </div>
                <div class="card">
                  <div class="title">审核主体(以政策划分)</div>
                  <div class="con">{{item.handler.name}}</div>
                </div>
                <div class="card">
                  <div class="title">审核模板</div>
                  <div class="con" v-for="(templateInfo,templateInfoIndex) in item.formTemplateList" :key="templateInfoIndex">
                    <a :href="templateInfo.url" target="_blank">{{templateInfo.file_name}}</a>
                  </div>
                </div>
                <div class="card">
                  <div class="title">审核细则</div>
                  <ul class="con" v-if="item.activityForms.length">
                    <li class="activity-item" v-for="(activity,activityIndex) in item.activityForms"
                        :key="activityIndex">
                      <span class="title-mark">{{activity.formType == 0?'单选':'填字'}}</span>
                      <span class="prize-info" :class="{mark:activity.prizeId}">{{prizeInfo(activity.prizeId)}}</span>
                      <p class="description">{{activity.title}}</p>
                    </li>
                  </ul>
                </div>
              </div>
              <div v-if="getUserAdmin" class="edit-btn">
                <span @click="editProcess('',item.id)">变更此环节</span>
              </div>
            </div>
          </div>
        </div>
        <Button type="primary" @click="editProcess('a')" v-if="!reviewProcessData.length && getUserAdmin"
                class="newly-build">配置此政策的线下审核流程
        </Button>
      </div>

    </VuePerfectScrollbar>
    <div class="footer" v-if="reviewProcessData.length && getUserAdmin">
      <div class="btn-edit-all" @click="editProcess('b')">全局变更</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
    name      : 'reviewProcess',
    data() {
      return {
        navActive : 0,
        policyData: [],
        policyId  : '',
        processID : '',

        projectType     : '',
        projectType1    : '',
        foundation      : '',
        foundation1     : '',
        projectTypeFocus: false,
        foundationFocus : false,

        prizesItem: [],

        reviewProcessData: [],
        shortTitle       : '',

        settingSP: {
          suppressScrollY: true
        }
      }
    },
    computed  : {
      getRouteQuery() {
        return this.$route.query
      },
      getUserAdmin() {
        return this.$store.state.userMsg.admin
      }
    },
    methods   : {
      getPolicyData() {
        this.ajaxData({
          urlv2: '1',
          type : 'get',
          url  : '/workflow/process/page',
          data : {
            page    : 1,
            pageSize: 100
          }
        }, (res, all) => {
          if (all.code == 0) {
            this.policyData = res.results
            setTimeout(() => {
              document.querySelector('.reivew-process-nav').scrollTop = this.getRouteQuery.scrolltop || 0
              this.$refs.reivewProcessNav.update()
            }, 10)
            if (this.getRouteQuery.policyId) {
              let policy  = res.results.find(item => item.id == this.getRouteQuery.policyId)
              let indexId = res.results.findIndex(item => item.id == this.getRouteQuery.policyId)
              this.getProcess(indexId, policy)
              this.policyId = this.getRouteQuery.policyId
            } else {
              this.getProcess(0, res.results[0])
              this.policyId = res.results[0].id
            }
          }
        })
      },

      prizeInfo(id) {
        let obj = this.prizesItem.find(item => item.id == id)
        return obj ? obj.title : '通用'

      },

      getProcess(id, nav, clear) {
        if (clear && this.getRouteQuery.policyId) {
          this.$router.push({
            name: 'reviewProcess',
          })
        }

        this.navActive  = id;
        this.shortTitle = nav.shortTitle;
        this.policyId   = nav.id;
        this.prizesItem = nav.prizes;

        this.projectType  = nav.projectType
        this.projectType1 = nav.projectType
        this.foundation   = nav.foundation
        this.foundation1  = nav.foundation


        if (!nav.processId) {
          this.processID         = ''
          this.reviewProcessData = []
          return;
        }
        this.processID = nav.processId
        this.ajaxData({
          urlv2: '1',
          type : 'get',
          url  : `/workflow/process/get`,
          data : {id: nav.processId}
        }, (res, all) => {
          if (all.code == 0) {
            this.reviewProcessData = res.activities && res.activities.length ? res.activities[1].children : []
          }
        })
      },

      projectTypeChange(e) {
        this.projectTypeFocus = this.projectType1 == this.projectType ? false : !0
      },
      foundationChange(e) {
        this.foundationFocus = this.foundation == this.foundation1 ? false : !0
      },

      updatePolicyType(action) {
        if(action == 0){
          this.ajaxData({
            type: 'post',
            url : '/policy/update',
            data: {
              policyId   : this.policyId, // 政策ID
              projectType: this.projectType, // （可选）申报项目类型
              foundation : this.foundation // （可选）申请依据
            }
          }, (res, all) => {
            if (all.code == 0) {
              this.$Message.success('修改成功');
              this.projectType1     = this.projectType
              this.foundation1      = this.foundation
              this.projectTypeFocus = false
            }
          })
        }
        if(action == 1){
          this.ajaxData({
            type: 'post',
            url : '/policy/update',
            data: {
              policyId   : this.policyId, // 政策ID
              projectType: this.projectType, // （可选）申报项目类型
              foundation : this.foundation // （可选）申请依据
            }
          }, (res, all) => {
            if (all.code == 0) {
              this.$Message.success('修改成功');
              this.projectType1     = this.projectType
              this.foundation1      = this.foundation
              this.foundationFocus  = false
            }
          })
        }
      },
      cannelUpdatePolicyType() {
        this.projectType      = this.projectType1
        this.foundation       = this.foundation1
        this.foundationFocus  = false
        this.projectTypeFocus = false
      },
      editProcess(pageName, id) {
        this.$router.push({
          name : 'editProcess',
          query: {
            id        : id ? id : this.processID,
            policyId  : this.policyId,
            name      : 'reviewProcess',
            pageName  : pageName,
            shortTitle: this.shortTitle,
            scrolltop : document.querySelector('.reivew-process-nav').scrollTop
          },
        })
      },

    },
    created() {
      this.getPolicyData()
    }
  }
</script>
